<template>
  <div class="todo">
    <header>
      <!-- <div class="titleBox">
        <p>ToDoList</p>
        <input
          placeholder="添加ToDo"
          v-model.trim="inpContent"
          @keyup.enter="addItem"
        />
      </div> -->
      <comtitleBox :Todolist="list" @babaadd="addItem"> </comtitleBox>
    </header>
    <main>
      <comListitem
        :itemList="incompleteList"
        @babaChange="changeItem"
        @babaDel="DelItem"
      >
        <template #title>
          <p>正在进行</p>
        </template>
      </comListitem>

      <comListitem
        :itemList="doneList"
        @babaChange="changeItem"
        @babaDel="DelItem"
      >
        <template #title>
          <p>已完成</p>
        </template>
      </comListitem>
    </main>
  </div>
</template>

<script>
import comListitem from "../components/todo/comListitem";
import comtitleBox from "../components/todo/comtitleBox";
// 组件一定是一个对象
export default {
  data: function () {
    return {
      // inpContent: "",
      list: JSON.parse(localStorage.getItem("list")) || [],
    };
  },
  methods: {
    addItem(inpContent) {
      if (inpContent) {
        this.list.push({
          id: Date.now(),
          //     content: nowinp,
          content: inpContent,
          isDone: false,
        });
      } else {
        alert("请输入内容");
      }
    },
    changeItem(nowId) {
      this.list.some((item) => {
        if (item.id == nowId) {
          item.isDone = !item.isDone;
      //     this.list.push(...this.list.splice(id, 1));
      //     console.log(id)
          return true;
        }
      });
    },
    DelItem(nowId) {
      this.list = this.list.filter((item) => {
        return item.id != nowId;
      });
    },
  },
  components: {
    comListitem,
    comtitleBox,
  },
  computed: {
    doneList() {
      return this.list.filter((item) => {
        return item.isDone;
      });
    },
    incompleteList() {
      return this.list.filter((item) => {
        return !item.isDone;
      });
    },
  },
  watch: {
    list: {
      handler: function () {
        localStorage.setItem("list", JSON.stringify(this.list));
      },
      deep: true,
    },
  },
};
</script>


 <style lang="scss" scoped>
.todo {
  header {
    height: 50px;
    background-color: #323232;
  }
}
//
</style>